<template>
    <div class="MJcontainer">
        <control ref="controlRef" :value="value" @setValue="setValue" :promptProp="promptProp" @create="create">
        </control>
        <div class="right">
            <div class="drawing-main">
                <div class="drawing-main__title">绘画任务</div>

                <div class="p-[10px]" style="height: calc(100% - 180px)">
                    <div class="task-lists flex-1">
                        <div v-for="(item, index) in taskLists" :key="index" class="task-item" :class="{
            'task-item--active': item.value === taskIndex
        }" @click="taskIndex = item.value">
                            {{ item.name }}
                        </div>
                    </div>

                    <div class="h-full" v-loading="isReceiving" element-loading-text="请求生成中">
                        <DrawingTabs v-for="tabs in taskLists" :key="tabs.value" :status="taskIndex"
                            :lazy="taskIndex == tabs.value" @pagination="setTaskRecordFunc">
                            <template #item="{ item }">
                                <DrawingResult :value="item" :status="item?.status" />
                            </template>
                        </DrawingTabs>
                    </div>
                </div>
            </div>
            <template v-if="isCreated">
                <div>
                    <div class="send">
                        <el-input v-model="value" :input-style="{
            width: '100%',
            height: '76px',
            borderRadius: '8px 8px 8px 8px',
            fontFamily: 'PingFang SC, PingFang SC',
            fontWeight: '400',
            fontSize: '12px',
            color: '#616772',
            lineHeight: '19px'
        }">
                            <template #append>
                                <div class="append" @click="draw"><img :src="iconSend" /></div>
                            </template>
                        </el-input>
                    </div>
                </div>
            </template>
        </div>
    </div>

</template>

<script setup lang="ts">
import Control from './control/index.vue'
import DrawingTabs from '~/pages/app/drawing/component/drawing-tabs.vue'
import DrawingResult from '~/pages/app/drawing/component/drawing-result/index.vue'
import { useIndexEffect } from '~/pages/app/drawing/hooks/useIndexEffect'
const { taskLists, taskIndex, isReceiving, setTaskRecordFunc } = useIndexEffect()
const props = defineProps({
    promptProp: {
        type: String,
        default: '',
    },
})
const value = ref('')
const controlRef = ref();
const setValue = (v: string) => {
    value.value = v
}
import iconSend from '~/assets/images/icon_send.png'

const isCreated = ref(false)
const create = () => {
    isCreated.value = true
}
const draw = () => {
    console.log('controlRef', controlRef)
    controlRef.value.draw()
}

</script>
<style lang="scss" scoped>
.MJcontainer {

    display: flex;
    //height: 1119px;
    width: 100%;

    // .right {
    //     display: flex;
    //     flex-direction: column;
    //     align-items: center;
    //     //min-width: 1412px;
    //     flex: 1;
    //     height: 1119px;

    //     background: #262932;
    //     border-radius: 8px 8px 8px 8px;

    //     .modelIcon {
    //         height: 785px;
    //         display: flex;
    //         justify-content: center;
    //         align-items: center;
    //     }

    //     .send {
    //         width: 100%;
    //         flex: 1;
    //         margin-bottom: 15px;
    //         //height: 76px;
    //         //background: #121318;
    //         padding: 0px 10px;
    //         display: flex;
    //         flex-direction: column;
    //         justify-content: flex-end;

    //         :deep(.el-input__wrapper) {
    //             background-color: rgba(0, 0, 0, 0.3) !important;

    //         }

    //         :deep(.el-input-group__append) {
    //             background-color: rgba(0, 0, 0, 0.3) !important;
    //         }

    //         //border-radius: 6px 6px 6px 6px;
    //         .append {
    //             margin: 0px 0px;
    //             width: 82px;
    //             height: 48px;
    //             background: #F86E07;
    //             border-radius: 6px 6px 6px 6px;
    //             font-size: 32px;
    //             color: #FFFFFF;

    //         }
    //     }

    // }
    .right {
        flex: 1;
        background: #262932;
        padding: 10px;

        .send {
            width: 100%;
            flex: 1;
            margin-bottom: 15px;
            //height: 76px;
            //background: #121318;
            padding: 0px 10px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;

            :deep(.el-input__wrapper) {
                background-color: rgba(0, 0, 0, 0.3) !important;

            }

            :deep(.el-input-group__append) {
                background-color: rgba(0, 0, 0, 0.3) !important;
            }

            //border-radius: 6px 6px 6px 6px;
            .append {
                margin: 0px 0px;
                width: 82px;
                height: 48px;
                border-radius: 6px 6px 6px 6px;
                cursor: pointer;
            }
        }
    }

    :deep(.el-dialog) {
        background: #262932;
    }
}





.drawing-main {
    border-radius: 12px;
    background: #262932;

    &__title {
        font-size: 18px;
        font-weight: 500;
        // color: #101010;
        color: '#ffffff';
        padding: 20px 0;
        margin: 0 20px;
        border-bottom: 1px solid #e5e5ea;
    }

    .task-lists {
        .task-item {
            display: inline-block !important;
            line-height: 30px;
            border-radius: 30px;
            //box-shadow: 0 2px 6px #ebeefd;
            text-align: center;
            height: 30px;
            padding: 0px 24px;
            font-size: 14px;
            margin: 10px 0;
            margin-left: 10px;
            cursor: pointer;
            @apply line-clamp-1 text-tx-primary;

            &--active {
                @apply text-btn-text;
                //box-shadow: 0 3px 6px #ebeefd;
                background: linear-gradient(87.73deg,
                        var(--gradient-1) 0%,
                        var(--gradient-2) 100%);
            }
        }
    }
}

.chatContainer {
    margin-top: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .welcomeTitle {
        margin-top: 10px;
        height: 35px;
        font-family: zcoolqingkehuangyouti, zcoolqingkehuangyouti;
        font-weight: 400;
        font-size: 30px;
        color: #F86E07;
        line-height: 35px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }

    .AIChatIntro {
        margin-top: 15px;
        height: 22px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #8B8E92;
        line-height: 19px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
}
</style>
